<template>
  <div>
    <el-row >
      <p class="el-descriptions__title">接触历史</p>
      <el-divider />
      <el-table :data="tableData" border >
        <template v-for="(item, index) in hisColumns" :key="index">
          <el-table-column :show-overflow-tooltip="true" :fixed="item.fixed" align="center" :prop="item.prop"
            :label="item.label" :width="item.width" fit >
            <template v-slot="scope" >
              <span v-if="!item.isLink">{{ scope.row[item.prop]}}</span>
              <el-link v-if="item.isLink" type="primary" @click="linkClick(scope.row)">查看详情</el-link>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-row>
    <el-row class="row">
      <p class="el-descriptions__title">开户网点</p>
      <el-divider />
      <el-table :data="tableData" border >
        <template v-for="(item, index) in accountColumns" :key="index">
          <el-table-column :show-overflow-tooltip="true" :fixed="item.fixed" align="center" :prop="item.prop"
            :label="item.label" :width="item.width" fit >
            <template v-slot="scope">
              <span>{{  scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-row>
    <el-row class="row">
      <!-- <p class="el-descriptions__title">成长足迹</p> -->
      <p style="width:100%" class="el-descriptions__title btnTitleTips"> 
        <span class="btnTitleTips">成长足迹 </span> 

        <el-select v-model="yearValue" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </p>
      <el-divider />
      <el-row class="row" style="width:90vw;">
        <el-steps style="width:100%" :active="stepItems.length+1" align-center>
          <!-- <el-icon><Timer /></el-icon> -->
          <el-step title="2022" :icon="Timer" />
          <el-step v-for="(item, index) in stepItems" :key="index">
            <template  v-slot:icon> 
              <el-image class="img"   :src="getImageUrl(item.img)" fit="fill" />
            </template>
            <template  v-slot:title> 
              <span>{{ item.title }}</span>
            </template>
            <template  v-slot:description> 
              <p>{{ item.time }}</p>
              <p>{{ item.address }}</p>
            </template>
          </el-step>
        </el-steps>
      </el-row>
    </el-row>
  </div>
</template>

<script setup lang="ts">

import { Timer } from '@element-plus/icons-vue'
const hisColumns = ref(
  [
      {label: '联系日期',prop:'cardNo', },
      {label: '拜访内容',prop:'acctNo', },
      {label: '联系方式',prop:'openDt'},
      {label: '创建人',prop:'openBranName'},
      {label: '操作',prop:'edit',isLink:true},  
  ]
)
const accountColumns = ref(
  [
      {label: '开户机构号',prop:'cardNo', },
      {label: '开户机构', prop: 'acctNo', } ,
      {label: '主办标志',prop:'openDt', },
      {label: '开始时间',prop:'startTime'},
      {label: '结束时间',prop:'endTime'},  
  ]
)
const tableData = ref([
  {cardNo:'801250',acctNo:'白杨支行营业部',openDt:'存款',openBranName:'唐思琪',startTime:'2021-06-30',endTime:'3000-12-31'},
  {cardNo:'801250',acctNo:'白杨支行营业部',openDt:'存款',openBranName:'唐思琪',startTime:'2021-06-30',endTime:'3000-12-31'},
  {cardNo:'801250',acctNo:'白杨支行营业部',openDt:'存款',openBranName:'唐思琪',startTime:'2021-06-30',endTime:'3000-12-31'},
])
const linkClick = (row) => {
  console.log(row)
}
const yearValue = ref('2022')
const options = ref([
  {
    value: '2022',
    label: '2022年',
  },
])
const getImageUrl = (url) => {
    return new URL(url,import.meta.url).href
}
const stepItems = ref([
  {img:'/@/assets/img/prod/DQ.png',title:'定期',time:'06-19',address:'白杨支行营业部'},
  {img:'/@/assets/img/prod/DQ.png',title:'定期',time:'06-19',address:'白杨支行营业部'},
  {img:'/@/assets/img/prod/DQ.png',title:'定期',time:'06-19',address:'白杨支行营业部'},
  {img:'/@/assets/img/prod/DQ.png',title:'定期',time:'06-19',address:'白杨支行营业部'},
  {img:'/@/assets/img/prod/DQ.png',title:'定期',time:'06-19',address:'白杨支行营业部'},
  {img:'/@/assets/img/prod/DQ.png',title:'定期',time:'06-19',address:'白杨支行营业部'},
])

</script>

<style scoped lang="scss">
  .row{
    margin-top: 10px;
    margin-bottom: 10px;
  }

.btnTitleTips{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.img{
    width: 40px;
    height: 40px;
  }
</style>